<!--eslint-disable-->
<template>
    <ui-main title="树形菜单">
        <div class="item one ">
            <div class="ui message">
                <div class="header">组件功能:</div>
                <p>基于el-tree继承可搜索、折叠，编辑适用于制作左侧菜单栏</p>
            </div>
            <div style="height:400px">
                <div class="ui flex">
                    <div class="item two">
                        <div style="width:100%;height:400px">
                            可编辑模式
                            <ui-tree-menu :data="treeData"
                                @node-click="handleNodeClick"
                                :operate-url="operateUrl"
                                :current-key.sync="currentKey"
                                editable
                                draggable transparent
                                @change="changeFn"

                                @node-expand="nodeExpand"
                                :input-max="50"
                                :input-min="20"
                            ></ui-tree-menu>
                        </div>
                    </div>
                    <div class="item one">
                        <div style="width:400px;height:400px">
                            不可编辑模式
                            <ui-tree-menu :data="treeData" :current-key.sync="currentKey" >
                                <template slot-scope="{node,data}">
                                    {{node.label}}
                                </template>
                            </ui-tree-menu>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item one">
            <ui-load-md file="tree-menu"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    /* eslint-disable */
    export default {
        data() {
            return {
                treeData: [
                    {
                        id: 1,
                        parentcode: 1,
                        label: '一级 1',
                        un_add: true,
                        pinyin_code: 'yi',//拼音检索
                        children: [{
                            id: 4,
                            un_edit: true,
                            parentcode: 4,
                            label: '二级 1-1',
                            children: [{
                                icon:'youtube',
                                id: 9,
                                un_remove: true,
                                parentcode: 9,
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                parentcode: 10,
                                label: '三级 1-1-2'
                            }]
                        }]
                    }, {
                        id: 2,
                        parentcode: 2,
                        label: '一级 2',
                        pinyin_code: 'er',//拼音检索
                        children: [{
                            id: 5,
                            parentcode: 5,
                            label: '二级 2-1'
                        }, {
                            id: 6,
                            parentcode: 6,
                            label: '二级 2-2'
                        }]
                    }, {
                        id: 3,
                        parentcode: 3,
                        label: '一级 3',
                        pinyin_code: 'san',//拼音检索
                        children: [{
                            id: 7,
                            parentcode: 7,
                            label: '二级 3-1'
                        }, {
                            id: 8,
                            parentcode: 8,
                            label: '二级 3-2'
                        }]
                    }
                ],
                demoUrl: 'http://element-cn.eleme.io/#/zh-CN/component/tree',
                operateUrl: '/admin/edu/document/operateTree',
                currentKey: 1
            };
        },
        mounted() {
            // console.log(this.treeData)
            this.currentKey = 3
        },

        methods: {
            handleNodeClick(data, node, tree) {
                console.log('节点数据', data);
                console.log('节点对应的 Node', node);
                console.log('tree实例', tree);
            },
            changeFn(data, node) {
                console.log('changeFn', data, node)
            },
            godFn(data, node, type) {
                console.log('godFn', data, node, type)
            },
            nodeExpand(a,b,c){
                console.log(a, b, c)
            }
        },
        watch: {
            currentKey(v) {
                this.$notify({
                    title: '提示',
                    message: 'currentKey: ' + v,
                    duration: 500
                });
                console.log('currentKey: ', v);
            }
        }
    };
</script>
